<template>
  <div>
    <vxe-table
      class="device-list"
      ref="table"
      stripe
      :data="tableData"
      :height="'700px'"
      :row-class-name="tableRowClassName"
      header-row-class-name="vux-table-header"
      border="none"
    >
      <vxe-table-column width="60" field="checked">
        <template #header>
          <vxe-checkbox
            v-model="checkAll"
            @change="checkAllDevice"
            :indeterminate="indeterminate"
          ></vxe-checkbox>
        </template>
        <template slot-scope="{ row }">
          <vxe-checkbox
            v-model="row.checked"
            @change="checkDevice(row, $event)"
          ></vxe-checkbox>
        </template>
      </vxe-table-column>
      <vxe-table-column type="seq" title="序号" />
      <vxe-table-column field="ip" title="IP" />
      <vxe-table-column field="hostName" title="主机名" show-overflow />
      <vxe-table-column field="hostType">
        <template #header>
          <el-select v-model="newType" @change="onChangeType" size="mini">
            <el-option label="全部分类" value="全部分类" />
            <el-option
              v-for="(item, index) in types"
              :key="index"
              :label="item.className"
              :value="item.className"
            />
            <!-- <el-option label="类型" :value="0" />
            <el-option label="交换机" :value="1" />
            <el-option label="Windows" :value="2" />
            <el-option label="linux" :value="3" /> -->
          </el-select>
        </template>
      </vxe-table-column>
      <vxe-table-column field="portNumber" title="端口数量" sortable />
      <vxe-table-column field="hostDesc" title="描述" show-overflow />
    </vxe-table>
    <!-- 分页 -->
    <div class="page">
      <div class="title">
        共 {{ pages.total }} 条记录 第 {{ pages.currentPage }} /
        {{ Math.ceil(pages.total / pages.pageSize) }} 页
      </div>
      <vxe-pager
        background
        size="small"
        :current-page="pages.currentPage"
        :page-size="pages.pageSize"
        :total="pages.total"
        :page-sizes="[10, 20, 30, 50, 100]"
        :layouts="['PrevPage', 'JumpNumber', 'NextPage', 'Sizes', 'FullJump']"
        @page-change="onPageChange"
      >
      </vxe-pager>
    </div>
  </div>
</template>

<script lang="ts">
import { Vue, Component, Prop, Emit } from "vue-property-decorator";

@Component
export default class resultList extends Vue {
  @Prop({
    type: String,
    required: true,
  })
  type!: String;
  @Prop({
    type: Array,
    required: true,
  })
  types!: any;
  @Prop({
    type: Array,
    required: true,
  })
  list!: any;

  //分页
  public pages: object = {
    pageSize: 10,
    currentPage: 1,
    total: 0,
  };

  public tableData: Array<any> = [];
  public _tableData: Array<any> = []; //最初始数据
  public newType: String = this.type;
  public selectedData: Array<any> = []; //选中
  public indeterminate: Boolean = false;
  public checkAll: Boolean = false;

  public deviceNums: Number = 0;

  public created() {
    this.list.map((item: any) => {
      item.checked = false;
    });
    // 初始化页面分页
    this.pages.total = this.list.length;
    this.onPageChange({ ...this.pages });
    
  }
  // 设备全选
  public checkAllDevice(val: any) {
    this.indeterminate = false;
    if (val.checked) {
      // 全选中
      console.log("全选中", this.tableData);
      for (let i = 0; i < this.tableData.length; i++) {
        this.tableData[i].checked = true;
      }
      // this.tableData.map((item) => {
      //   item.checked = true;
      // });
      this.selectedData = this.tableData;
    } else {
      console.log(2, val.checked);
      for (let i = 0; i < this.tableData.length; i++) {
        this.tableData[i].checked = false;
      }
      // this.tableData.map((item) => {
      //   item.checked = false;
      // });
      this.selectedData = [];
    }
    console.log(this.tableData);
  }
  // 设备单选
  public checkDevice(item: any, $event: any) {
    item.checked = $event.checked;
    console.log(item, $event);

    // console.log(this.list);

    this.selectedData = this.list.filter(
      (items: { checked: any }) => items.checked === true
    );
    console.log("selectedData", this.selectedData);
    console.log("子组件list", this.list);
    sessionStorage.setItem("findResultData", JSON.stringify(this.list));
    if (this.selectedData.length == this.tableData.length) {
      this.checkAll = true;
    } else {
      this.checkAll = false;
    }
    if (this.selectedData.length <= 0) {
      this.indeterminate = false;
    } else {
      this.indeterminate = true;
    }
  }
  public tableRowClassName({ row, rowIndex }) {
    //把每一行的索引放进row
    row.index = rowIndex;
  }

  public onChangeType(value: string) {
    console.log(value);
    if (value === "全部分类") {
      this.tableData = this.list;
      return;
    }
    this.tableData = this.list.filter(
      (items: { hostType: any }) => items.hostType === value
    );
  }

  //分页
  public onPageChange({ currentPage, pageSize }) {
    this.pages.currentPage = currentPage;
    this.pages.pageSize = pageSize;
    this._tableData = this.splitArr(this.list, this.pages.pageSize);
    this.tableData = this._tableData[currentPage - 1];
  }
  public splitArr(arr: any, size: any) {
    let index = 0;
    let res = [];
    while (index < arr.length) {
      res.push(arr.slice(index, index + size));
      index += size;
    }
    return res;
  }
}
</script>

<style lang="stylus" rel="stylesheet/stylus" scoped>
// 表格高度
/deep/.vxe-body--row .vxe-body--column, /deep/.vxe-table--render-default .vxe-header--column:not(.col--ellipsis)
  border-bottom none
  height 34px
  padding 0
/deep/.vxe-table--render-default .vxe-body--row.row--stripe
  background #f0f2f4
.device-list
  padding 0 20px
  /deep/.vxe-table--header
    border-collapse collapse
  /deep/.vux-table-header
    background #fff
    font-size 13px
    color #000
    font-weight 700
    border 0
    border-bottom 2px solid #69aeff
    /deep/.vxe-header--column
      padding 0
    /deep/.vxe-cell--edit-icon
      display none
    /deep/.el-input .el-input__inner
      border none
      font-size 13px
      color #000
      font-weight 700
    input::placeholder
      font-size 13px
      color #000
      font-weight 700
    .el-select .el-input .el-select__caret
      font-size 13px
      color #000
      font-weight 700
  /deep/.vxe-table--body
    /deep/.vxe-body--row
      font-size 13px
      color #000
    /deep/.row--stripe
      background-color #f0f2f4
      border-radius 4px
      border 1px solid #ebebeb
    /deep/.vxe-cell
      font-size 13px
      color #000
  /deep/.vxe-checkbox--unchecked-icon::before
    border 1px solid #b3b3b3 !important
  /deep/.el-input__inner
    border none
    padding-left 0
  .edit
    width 33px
    // height: 100%;
    background #69aeff
    position absolute
    top 40px
    text-align center
    .icon
      border-bottom 1px dotted #fff
      margin 0 4px
.page
  margin-top 24px
  height 40px
  .vxe-pager
    text-align center
  .title
    font-size 12px
    color rgba(0, 0, 0, 0.43)
    display inline-block
    position absolute
    left 50px
    line-height 40px
    z-index 10002
  .vxe-icon--caret-bottom::before
    top 0.6rem
</style>
